<template>
   <div class='leaflet'>
	   <el-card class="mapCard">
			<span>探索世界</span>
			<el-popover
				placement="right"
				trigger="click"
				v-model="mapCardVisible">
				<div class="mapDiv">
				<el-tabs v-model="first" @tab-click="handleClick">
					<el-tab-pane label="ABCDEF" name="A,B,C,D,E,F"></el-tab-pane>
					<el-tab-pane label="GHIJ" name="G,H,I,J"></el-tab-pane>
					<el-tab-pane label="KLMN" name="K,L,M,N"></el-tab-pane>
					<el-tab-pane label="PQRSTUVW" name="P,Q,R,S,T,U,V,W"></el-tab-pane>
					<el-tab-pane label="XYZ" name="X,Y,Z"></el-tab-pane>
				</el-tabs>
				<div v-loading="loading" class="byFirstCity" v-for="item in citys" :key="item.id">
					<span style="float:left;" v-for="first in item.slice(0,1)" :key="first.first">{{first.first}}</span>
					<div style="width:550px;margin-left:50px;">
						<el-link @click="getScenicByCityId(itemC.id, itemC.name)" target="_blank" style="margin-left:15px" v-for="itemC in item" :key="itemC.id">
							{{itemC.name}}
						</el-link>
					</div>
				</div>
				</div>
				<el-input slot="reference" style="width:80px" :value="cityName"></el-input>
			</el-popover>
		</el-card>
        <div style="width:100%;height:100%">
			<!-- 地图容器 -->
			<div id='map'>
				<button style="position: absolute; z-index: 100000;" @click="totalRun()">我的足迹</button>
			</div>
		</div>
  	</div>
</template>

<script>
import icon from '@/assets/marker-icon.png'
import { DomEvent, latLng } from 'leaflet'
export default {
    name: 'LeafletViews',
    data () {
        return {
            map: null,
			logo: '',
			coord: '',
			scenic: [
				{	// 1
					lat: '30.183122', // lat
					lng: '104.240317', // lng
					imageId: 143, // 图片Id
					price: '68' // 价格
				},
				{	// 2
					lat: '26.194877',
					lng: '117.647159',
					imageId: 144, // 图片Id
					price: '300' // 价格
				},
				{	// 3
					lat: '26.012361',
					lng: '119.317205',
					imageId: 145, // 图片Id
					price: '222' // 价格
				},
				{	// 4
					lat: '34.143635',
					lng: '108.963339',
					imageId: 146, // 图片Id
					price: '908' // 价格
				},
				{	// 5
					lat: '39.232253',
					lng: '86.490112',
					imageId: 146, // 图片Id
					price: '880' // 价格
				},
				{	// 6
					lat: '32.249974',
					lng: '92.817849',
					imageId: 146, // 图片Id
					price: '598' // 价格
				}
			],
			// 存放地图中的标点marker
			markerV: null,
			distance: null, // 距离
			// 默认
			first: 'A,B,C,D,E,F',
			// 市集合
			citys: [],
			// loading加载状态
			loading: false,
			// 存放地图筛选城市名称
			cityName: '',
			// 存放地图筛选城市名称
			cityId: '',
			// 存放景区信息列表 用于在地图上展示景区信息
			scenicList: [],
			// 存放地图标识对象
			greenIcon: null,
			map: null,
			// 存放地图标识marker
			marker: null,
			// marker组
			layerGroup: null,
			// 根据首字母分类弹出框状态
			mapCardVisible: false,
        }
    },
    mounted () {
		// 地图初始化
		this.MapShow()
		// 根据首字母获取市
		this.getCitysByFirst()
    },
    methods: {
		// 地图筛选城市显示景区方法 (lzy 2022-7-15 15点20分) 
		getScenicByCityId (cityId, cityName) {
			this.mapCardVisible = false
			this.cityName = cityName
			this.cityId = cityId
			var router = this.$router
			this.$axios.get('http://127.0.0.1:8082/scenic/getScenicByCityId?cityId=' + cityId).then(res => {
				this.scenicList = res.data.obj
				var i = 0
				if(this.layerGroup !== null){
					this.layerGroup.clearLayers()
				}
				const layers = []
				if (this.scenicList !== null) {
					this.scenicList.forEach(item => {
						var text = '<div id="btn' + i + '"><img style="width:100px;" src="http://127.0.0.1:8082/getImageById?id=' + item.imageId + '"/><div style="width:100px;font-size:16px;">' + item.briefIntroduction + '</div></div>'
						this.marker = this.$L.marker([item.lat, item.lng], {icon: this.greenIcon}).addTo(this.map).bindPopup(text, { autoClose: false }).openPopup()
						layers.push(this.marker)
						document.getElementById('btn' + i).style = "cursor:pointer"
						// 给弹框内容绑定事件
						document.getElementById('btn' + i).onclick = function (e) {
							router.push({name: 'ScenicspotDetailsView', query:{id: item.id}})
						}
						i++
					})
					this.marker.on('click', function () {
						alert(1)
						var j = 0
						this.scenicList.forEach(item => {
							document.getElementById('btn' + j).style = "cursor:pointer"
							j++
						})
					})
					this.map.setView([this.scenicList[0].lat, this.scenicList[0].lng], 10) // 地图中心位置，缩放等级
					this.layerGroup = this.$L.layerGroup(layers)
					this.map.addLayer(this.layerGroup);
				}
			})
		},
		// 根据首字母获取市 (lzy)
		getCitysByFirst () {
			this.$axios.get('http://127.0.0.1:8082/area/getCitysByFirst?first=' + this.first).then(res => {
				this.citys = res.data.obj
			}).catch(error => {
				this.$message.error('服务器崩溃了，请稍后再尝试使用！');
			})
		},
		// 标签页点击方法 (lzy)
		handleClick(tab, event) {
			// 根据首字母获取市
			this.getCitysByFirst()
		},
		// 地图渲染 (lzy)
		MapShow () {
			let that = this
			if (document.getElementById('map')) {
				const that = this
				const map = this.$L.map('map', {
				center: [34.161818, 108.767477], // 中心位置
				zoom: 6, // 缩放等级
				attributionControl: true, // 版权控件
				zoomControl: true // 缩放控件
				})
				
				this.map = map

				var LeafIcon = this.$L.Icon.extend({
				options: {
					iconSize: [25, 41], // 图标宽高
					iconAnchor: [13, 38], // 图标锚点
					shadowAnchor: [4, 62], // 阴影锚点
					popupAnchor: [0, -40] // 弹出框弹出位置，相对于图标锚点
				}
				})

				// 创建多个icon
				var greenIcon = new LeafIcon({
				iconUrl: icon
				})

				this.greenIcon = greenIcon

				this.map = map // data上需要挂载
				this.$L.tileLayer(
				'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
				, { minZoom: 4 }).addTo(map) // 加载底图


			} else {
				// alert(1)
			}
		},
    }
}

</script>

<style scoped>
.leaflet{
    width: 100%;
    height: 900px;
	overflow: hidden;
}
#map {
    width: 100%;
    height: 90%;
}
</style>
